<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title data-i18n="title">HTTP Downloader - Add URL(s)</title>
		<style>
			html, body
			{
				height: 100%;
				margin: 0;
				font-family: "Tahoma", sans-serif;
				font-size: 12px;
				background-color: Menu;
			}

			input, textarea, select
			{
				border: 1px solid #B1B1B1;
			}

			input:focus, textarea:focus, select:focus
			{
				border: 1px solid #0996F8;
			}

			textarea
			{
				height: 100%;
				width: 100%;
				font-family: "Tahoma", sans-serif;
				font-size: 12px;
				-webkit-box-sizing: border-box;
				-moz-box-sizing: border-box;
				box-sizing: border-box;
				resize: none;
				white-space: pre;
			}

			fieldset
			{
				display: inline-block;
				border: 1px solid #B1B1B1;
			}

			label, fieldset
			{
				user-select: none;
			}

			.tab > input[type="radio"]
			{
				display: none;
			}

			.tab > input + label
			{
				display: inline-block;
				position: relative;
				top: 1px;
				padding: 5px;
				margin-right: -1px;
				background-color: #F0F0F0;
				border: 1px solid #B1B1B1;
				border-bottom: none;
				z-index: 0;
			}

			.tab > input + label:hover
			{
				background-color: #E0E0E0;
			}

			.tab > input:checked + label
			{
				background-color: #FFFFFF;
				z-index: 2;
			}

			.tab_frame
			{
				display: flex;
				position: relative;
				min-height: 205px;
				background-color: #FFFFFF;
				border: 1px solid #B1B1B1;
				z-index: 1;
			}

			.tab_panel
			{
				display: none;
				width: 100%;
			}

			.tab > input:nth-child(1):checked ~ .tab_frame > .tab_panel:nth-child(1),
			.tab > input:nth-child(9):checked ~ .tab_frame > .tab_panel:nth-child(5)
			{
				display: block;
			}

			.tab > input:nth-child(3):checked ~ .tab_frame > .tab_panel:nth-child(2),
			.tab > input:nth-child(5):checked ~ .tab_frame > .tab_panel:nth-child(3),
			.tab > input:nth-child(7):checked ~ .tab_frame > .tab_panel:nth-child(4)
			{
				display: flex;
				flex-flow: column;
			}

			.proxy_tab_panel
			{
				display: none;
				margin-top: 10px;
			}
		</style>
		<script src="download.js"></script>
	</head>
	<body>
		<input type="hidden" id="window_id" value="">
		<input type="hidden" id="last_urls" value="">
		<div style="display: flex; flex-flow: column; height: 100%; min-width: 580px;">
			<div style="flex: 1; display: flex; flex-flow: column; height: 100%; margin: 15px 15px 0px 15px;">
				<div style="flex: 1; display: flex; flex-flow: column; height: 100%;">
					<div style="display: flex; flex-flow: row;">
						<div style="margin-top: auto;">
							<label for="urls" data-i18n="url_s__">URL(s):</label>
						</div>
						<div style="flex: 1; display: flex; flex-flow: row; text-align: right; margin-bottom: 5px;">
							<label for="filter" style="margin: auto 0px auto 70px; white-space: nowrap;" data-i18n="regex_filter_">RegEx filter:</label>
							<select id="filter_presets" style="margin-left: 5px;">
								<option selected="selected" data-i18n="custom">Custom</option>
								<option data-i18n="images">Images</option>
								<option data-i18n="music">Music</option>
								<option data-i18n="videos">Videos</option>
							</select>
							<input type="text" id="filter" list="filter_presets" value="" style="flex: 1; width: 100%; margin-left: 5px;"><button type="button" id="apply_filter" style="margin-left: 5px;" data-i18n="apply">Apply</button><button type="button" id="revert_filter" style="margin-left: 5px;" data-i18n="revert">Revert</button>
						</div>
					</div>
					<textarea id="urls" rows="4" style="flex: 1;"></textarea>
				</div>
				<div id="advanced_info" style="display: none; margin-top: 15px;">
					<div class="tab">
						<input type="radio" name="tabs" id="tab_general" checked><label for="tab_general" data-i18n="general">General</label><input type="radio" name="tabs" id="tab_cookies"><label for="tab_cookies" data-i18n="cookies">Cookies</label><input type="radio" name="tabs" id="tab_headers"><label for="tab_headers" data-i18n="headers">Headers</label><input type="radio" name="tabs" id="tab_post_data"><label for="tab_post_data" data-i18n="post_data">POST Data</label><input type="radio" name="tabs" id="tab_proxy"><label for="tab_proxy" data-i18n="proxy">Proxy</label>
						<div class="tab_frame">
							<div class="tab_panel" style="margin: 10px;">
								<div style="margin: auto;">
									<div style="margin-top: auto;">
										<input type="checkbox" id="enable_directory"><label for="enable_directory" data-i18n="download_directory_">Download directory:</label>
									</div>
									<div>
										<input type="text" id="directory" value="" data-i18n="_use_program_default_" placeholder="[Use Program Default]" style="box-sizing: border-box; width: 100%;" disabled>
									</div>
								</div>
								<div style="display: flex; flex-flow: row wrap; margin-top: 10px;">
									<div style="margin-right: 15px;">
										<div style="margin-top: auto;">
											<input type="checkbox" id="enable_parts"><label for="enable_parts" data-i18n="download_parts_">Download parts:</label>
										</div>
										<div>
											<input type="number" id="parts" value="1" min="1" max="100" style="width: 15ch; text-align: center;" disabled>
										</div>
									</div>
									<div style="margin: 5px 15px 0px 0px;">
										<div style="margin-top: auto;">
											<label data-i18n="ssl_tls_version_">SSL / TLS version:</label>
										</div>
										<select id="ssl_tls_version" style="width: 100%;">
											<option value="0" data-i18n="default">Default</option>
											<option value="1">SSL 2.0</option>
											<option value="2">SSL 3.0</option>
											<option value="3">TLS 1.0</option>
											<option value="4">TLS 1.1</option>
											<option value="4">TLS 1.2</option>
										</select>
									</div>
									<div style="flex: 1;">
										<fieldset>
											<legend data-i18n="authentication">Authentication</legend>
											<div style="display: flex; flex-flow: row wrap;">
												<div style="margin-right: 10px;">
													<div style="margin-top: auto;">
														<label for="username" data-i18n="username_">Username:</label>
													</div>
													<div>
														<input type="text" id="username" value="" style="width: 12ch;">
													</div>
												</div>
												<div style="flex: 1;">
													<div style="margin-top: auto;">
														<label for="password" data-i18n="password_">Password:</label>
													</div>
													<div>
														<input type="password" id="password" value="" style="width: 12ch;">
													</div>
												</div>
											</div>
										</fieldset>
									</div>
								</div>
								<div>
									<div style="margin-top: auto;">
										<input type="checkbox" id="enable_speed_limit"><label for="enable_speed_limit" data-i18n="download_speed_limit_">Download speed limit (bytes/s):</label>
									</div>
									<div>
										<input type="text" id="speed_limit" value="0" style="width: 30ch; text-align: center;" disabled>
									</div>
								</div>
								<div style="margin-top: 10px;">
									<input type="checkbox" id="simulate_download"><label for="simulate_download" data-i18n="simulate_download">Simulate download</label>
								</div>
							</div>
							<div class="tab_panel" style="margin: 10px;">
								<div style="margin-top: auto;">
									<label for="cookies" data-i18n="cookies_">Cookies:</label>
								</div>
								<div style="flex: 1;">
									<textarea id="cookies" rows="5"></textarea>
								</div>
							</div>
							<div class="tab_panel" style="margin: 10px;">
								<div style="margin-top: auto;">
									<label for="headers" data-i18n="headers_">Headers:</label>
								</div>
								<div style="flex: 1;">
									<textarea id="headers" rows="5"></textarea>
								</div>
							</div>
							<div class="tab_panel" style="margin: 5px 10px 10px 10px;">
								<div style="margin-top: auto;">
									<input type="checkbox" id="method"><label for="method" data-i18n="send_post_data_">Send POST Data:</label>
								</div>
								<div style="flex: 1;">
									<textarea id="post_data" rows="5"></textarea>
								</div>
							</div>
							<div class="tab_panel" style="margin: 10px;">
								<div style="margin-top: auto;">
									<label data-i18n="proxy_">Use proxy:</label>
								</div>
								<div>
									<select id="proxy_type">
										<option value="0" data-i18n="default">Default</option>
										<option value="1">HTTP</option>
										<option value="2">HTTPS</option>
										<option value="3">SOCK v4</option>
										<option value="4">SOCKS v5</option>
									</select>
									<div id="proxy_tab" class="proxy_tab" style="margin-top: 10px;">
										<div class="proxy_tab_panel" style="border-top: 1px solid grey; padding-top: 5px;">
											<div style="display: flex; flex-flow: row wrap;">
												<div>
													<div>
														<label for="proxy_hostname_ip" data-i18n="hostname_ip_">Hostname / IP address:</label>
													</div>
													<div>
														<input type="text" id="proxy_hostname_ip" value="localhost" style="width: 50ch; text-align: center;">
													</div>
												</div>
												<div style="align-self: flex-end; margin: 0px 4px 5px 4px; text-align: center;">
													<div>:</div>
												</div>
												<div style="flex: 1;">
													<div>
														<label for="proxy_port" data-i18n="port_">Port:</label>
													</div>
													<div>
														<input type="number" id="proxy_port" value="" min="1" max="65535" style="width: 10ch; text-align: center;">
													</div>
												</div>
											</div>
										</div>
										<div class="proxy_tab_panel">
											<div style="display: flex; flex-flow: row wrap;">
												<div style="margin-right: 10px;">
													<div style="margin-top: auto;">
														<label for="proxy_username" data-i18n="username_">Username:</label>
													</div>
													<div>
														<input type="text" id="proxy_username" value="">
													</div>
												</div>
												<div style="flex: 1;">
													<div style="margin-top: auto;">
														<label for="proxy_password" data-i18n="password_">Password:</label>
													</div>
													<div>
														<input type="password" id="proxy_password" value="">
													</div>
												</div>
											</div>
										</div>
										<div class="proxy_tab_panel">
											<div style="margin-top: auto;">
												<label for="proxy_ident_username" data-i18n="username_">Username:</label>
											</div>
											<div>
												<input type="text" id="proxy_ident_username" value="">
											</div>
											<div style="margin-top: 10px;">
												<input type="checkbox" id="proxy_resolve_domain_names_v4a"><label for="proxy_resolve_domain_names_v4a" data-i18n="resolve_dn_v4a">Allow proxy to resolve domain names (use SOCKS v4a)</label>
											</div>
										</div>
										<div class="proxy_tab_panel">
											<div style="margin-top: 10px;">
												<input type="checkbox" id="proxy_use_authentication"><label for="proxy_use_authentication" data-i18n="use_authentication_">Use authentication:</label>
											</div>
											<div style="display: flex; flex-flow: row wrap; margin: 5px 0px 0px 20px;">
												<div style="margin-right: 10px;">
													<div style="margin-top: auto;">
														<label id="proxy_socks5_username_label" for="proxy_socks5_username" style="color: grey;" data-i18n="username_">Username:</label>
													</div>
													<div>
														<input type="text" id="proxy_socks5_username" value="" disabled>
													</div>
												</div>
												<div style="flex: 1;">
													<div style="margin-top: auto;">
														<label id="proxy_socks5_password_label" for="proxy_socks5_password" style="color: grey;"  data-i18n="password_">Password:</label>
													</div>
													<div>
														<input type="password" id="proxy_socks5_password" value="" disabled>
													</div>
												</div>
											</div>
											<div style="margin-top: 10px;">
												<input type="checkbox" id="proxy_resolve_domain_names"><label for="proxy_resolve_domain_names" data-i18n="resolve_dn">Allow proxy to resolve domain names</label>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div style="display: flex; flex-flow: row; margin-top: 15px; margin-bottom: 15px;">
					<div>
						<input type="checkbox" id="advanced"><label for="advanced" data-i18n="advanced_options">Advanced options</label>
					</div>
					<div style="flex: 1; text-align: right;">
						<button type="button" id="download" data-i18n="download">Download</button><button type="button" id="add" style="margin-left: 5px;" data-i18n="add">Add</button><button type="button" id="cancel" style="margin-left: 5px;" data-i18n="cancel">Cancel</button>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>